<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

  <link rel="stylesheet" href="../css/userInfo.css">
  <link rel="stylesheet" href="../css/search.css">
  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>全局搜索</title>
<body>
<!-- 导航 -->
<nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
  <h1 class="title">
    <a class="navbar-brand" href="#">
      <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
    </a>
  </h1>
  <!-- 折叠按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto" id="ulInfo">
      <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
      <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="videoUpload.html">上传视频</a>
      </li>
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="videoManager.html">视频管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a></li>
      <!--下拉-->
      <li class="dropdown" style="margin-right: 800px">
        <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
        <ul class="dropdown-menu" style="text-align: center;">
          <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
          <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
          <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
          <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
        </ul>
      </li>

      <template v-if="currentUser.account == null">
        <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
      </template>
      <template v-if="currentUser.account != null">
        <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
      </template>
    </ul>
  </div>
</nav>

<!-- 风格展示区 -->
<div class="trend-style bg-light" id="itemInfo">
  <!--主体开始-->
  <div class="box">
    <div class="box_con">
      <!--搜索框-->
      <div style="height: 100px;background-size: cover;">
        <div style="position: absolute;width:60%;margin-left: 28%;margin-top: 50px">
          <form class="form-inline ml-auto">
            <input v-model="keyword" type="text" class="form-control mr-sm-2"
                   style="width: 600px;height: 50px" placeholder="请输入搜索内容">
            <input @click="searchVideoList" type="button" class="btn btn-outline-secondary  my-2 my-sm-0"
                   style="width: 85px;height: 50px;font-size: 18px" value="搜索">
          </form>
        </div>
      </div>
      <div class="con">
        <div class="con_select">
          <!--<div class="con_select_term clearfix2">
              <div class="select_skt fl">相&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关：</div>
              <div class="select_skr fl">
                  <p id="xiangguan" style="display: none"></p>
                  <div class="list fl">
                      <a class="hover">最新</a>
                      <a>最热</a>
                  </div>
              </div>
          </div>
          <div class="con_select_term clearfix2">
              <div class="select_skt fl">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签：</div>
              <div class="select_skr fl">
                  <p id="biaoqian" style="display: none"></p>
                  <div class="list fl">
                      <a class="hover">全部</a>
                      <a>Web</a>
                      <a>Java</a>
                      <a>MySQL</a>
                  </div>
              </div>
          </div>
          <div class="con_select_term clearfix2">
              <div class="select_skt fl">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：</div>
              <div class="select_skr fl">
                  <p id="uploadTime" style="display: none"></p>
                  <div class="list fl">
                      <a class="hover">全部</a>
                      <a>一天</a>
                      <a>一周</a>
                      <a>一月</a>
                  </div>
              </div>
          </div>-->
          <!--<div class="con_select_term clearfix2">
              <div class="select_skt fl">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</div>
              <div class="select_skr fl">
                  <div class="select">
                      <p>请选择类型</p>
                      <ul>
                          <li data-value="请选择类型">请选择类型</li>
                          <li data-value="免费">免费</li>
                          <li data-value="vip尊享">vip尊享</li>
                      </ul>
                  </div>
              </div>
          </div>-->
          <div class="con_select_term clearfix2">
            <div class="select_skt fl">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</div>
            <div class="select_skr fl">
              <p id="biaoqian" style="display: none"></p>
              <div class="list fl">
                <a @click="searchType('')" class="hover">全部</a>
                <a @click="searchType('1')">免费</a>
                <a @click="searchType('2')">vip尊享</a>
              </div>
            </div>
          </div>
        </div>
        <div class="con_order">
          <ul>
            <li><a @click="searchVideoList" class="hover">默认</a></li>
            <li><a @click="orderByBrowse">播放量<span></span></a></li>
            <li><a @click="orderByDownload">下载量<span></span></a></li>
            <li><a @click="orderByCollect">收藏量<span></span></a></li>
          </ul>
        </div>
        <div class="con_list">
          <ul class="con_list_ul">
            <li class="clearfix" v-for="video in videoList.data"
                style="height: 160px;border-bottom: 1px dotted #aba5a5">
              <div class="fl" style="position:relative;margin-left: 15px;">
                <a :href="'../showVideoDetail?vid='+video.vid">
                  <img :src="'../upload/'+video.coverUrl" width="180px" height="120px" alt="">
                </a>
                <span style="position:absolute;left:2px;top:1px;width:24px;height:18px; background: rgba(253,215,114,0.8); text-align: center; color: #fff; font-size: 12px;">
                                    {{video.status | formatStatus}}</span>
              </div>
              <div class="desTxt fl" style="margin-left: 5%">
                <div>
                  <a :href="'../showVideoDetail?vid='+video.vid">
                    <h3>{{video.type | formatType}}《{{video.videoName}}》</h3>
                  </a>
                </div>

                <ul class="desData">
                  <li><i class="icon-date"></i>{{video.videoDetail.uploadTime | formatDate}}</li>
                  <li><i class="icon-eye"></i>{{video.videoDetail.browseCount}}</li>
                  <li><i class="icon-collect"></i>{{video.videoDetail.collectCount}}</li>
                  <li><i class="icon-download"></i>{{video.videoDetail.downloadCount}}</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <!--分页模块-->
        <div style="width:60%;margin-left:20%; margin-top: 50px;text-align:center;" class="centerdiv">
          <input type="button" value="首  页" class="btnPage" @Click="pageOper('min')"
                 style="margin-left: 20%"/>
          <input type="button" value="上一页" class="btnPage" @Click="pageOper('up')"/>
          第<input type="text" v-model="pageNo" class="btn"
                  style="width: 34px;text-align: center;margin-bottom: 4px"
                  @blur="pageOper">页&nbsp;&nbsp;<b>·</b>&nbsp;&nbsp;共
          &nbsp;<span v-text="maxPage"></span>&nbsp; 页
          <input type="button" value="下一页" class="btnPage" @Click="pageOper('down')"/>
          <input type="button" value="尾  页" class="btnPage" @Click="pageOper('max')"/>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- footer部分 -->
<footer class="bg-white navbar-light p-4  text-center">
  <div class="container">
    <h3>合作伙伴</h3>
    <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
    <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by liuxin.</p>
  </div>
</footer>
</body>
<!--底部结束-->
<script src="../js/resources.js"></script>
<script type="text/javascript">
  let message = null;
  // 获取url参数名
  function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    } else {
      return null;
    }
  }

  /*导航条用户信息*/
  new Vue({
    el: "#ulInfo",
    data() {
      return {currentUser: "",}
    },
    mounted() {
      message = this.$message;
      axios
        .post('../getCurrentUser')
        .then(result => {
          this.currentUser = result.data;
        })
        .catch(function (error) {
          message.error(error.response.data);
        });
    }
  });

  /*视频搜索信息*/
  new Vue({
    el: "#itemInfo",
    data: {
      keyword: "",
      status: "",
      videoList: "",
      pageNo: "1",
      maxPage: "1",
      order: 1
    },
    methods: {
      getKeyword: function () {
        this.keyword = GetQueryString('keyword');
      },
      searchType(status) {
        this.status = status;
        this.searchVideoList();
      },
      searchVideoList: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios
          .get("../searchVideo?keyword=" + this.keyword
            + "&pageNo=" + this.pageNo
            + "&status=" + this.status
          )
          //.post("../searchVideo",{keyword:this.keyword,pageNo:this.pageNo})
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      /*排序操作*/
      orderByDownload: function () {
        this.order++;
        let sort = "";
        let column = "downloadCount";
        if (this.order % 2 === 0) {
          sort = "asc"; //升序
        } else {
          sort = "desc"; //降序
        }
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios
          .get("../searchVideo?keyword=" + this.keyword + "&sort=" + sort + "&column=" + column + "&pageNo=" + this.pageNo+ "&status=" + this.status)
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      /*排序操作*/
      orderByCollect: function () {
        this.order++;
        let sort = "";
        let column = "collectCount";
        if (this.order % 2 === 0) {
          sort = "asc"; //升序
        } else {
          sort = "desc"; //降序
        }
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios
          .get("../searchVideo?keyword=" + this.keyword + "&sort=" + sort + "&column=" + column + "&pageNo=" + this.pageNo+ "&status=" + this.status)
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      /*排序操作*/
      orderByBrowse: function () {
        this.order++;
        let sort = "";
        let column = "browseCount";
        if (this.order % 2 === 0) {
          sort = "asc"; //升序
        } else {
          sort = "desc"; //降序
        }
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios
          .get("../searchVideo?keyword=" + this.keyword + "&sort=" + sort + "&column=" + column + "&pageNo=" + this.pageNo+ "&status=" + this.status)
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      //翻页操作
      pageOper: function (type) {
        let newPage = this.pageNo;
        if (type === "min") {
          newPage = 1
        } else if (type === "up") {
          newPage = newPage - 1;
          if (newPage < 1) {
            newPage = 1;
          }
        } else if (type === "down") {
          newPage = newPage + 1;
          if (newPage > this.maxPage) {
            newPage = this.maxPage;
          }
        } else if (type === "max") {
          newPage = this.maxPage;
        }
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios
          .get("../searchVideo?keyword=" + this.keyword + "&pageNo=" + newPage+ "&status=" + this.status)
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
    },
    mounted() {
      this.getKeyword();
      this.searchVideoList();
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        return year + "-" + month + "-" + date
      },
      formatType(typeId) {
        if (typeId === 1) {
          return "JavaSE";
        } else if (typeId === 2) {
          return "Web";
        } else if (typeId === 3) {
          return "MySQL";
        } else if (typeId === 4) {
          return "JavaWeb";
        }
        return "未知"
      },
      formatStatus(status) {
        if (status === 0) {
          return "下架";
        } else if (status === 1) {
          return "免费";
        } else if (status === 2) {
          return "VIP";
        }
        return "免费"
      },
    },
  });


</script>
</html>
